{% extends "base.html" %}

{% block title %}使用统计 - 墨韵图书共享平台{% endblock %}

{% block styles %}
<script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
{% endblock %}

{% block content %}
<div class="admin-panel">
    <div class="row mb-4">
        <div class="col-md-12">
            <h2 class="ink-decoration mb-4">平台使用统计</h2>
            <p class="text-muted">通过各种统计数据了解平台的使用情况。</p>
        </div>
    </div>
    
    <div class="row">
        <div class="col-md-3">
            <div class="card ink-card mb-4">
                <div class="card-header">
                    <h5 class="mb-0">管理菜单</h5>
                </div>
                <div class="list-group list-group-flush">
                    <a href="{{ url_for('admin_panel') }}" class="list-group-item list-group-item-action">
                        <i class="fas fa-tachometer-alt me-2"></i> 仪表盘
                    </a>
                    <a href="{{ url_for('admin_books') }}" class="list-group-item list-group-item-action">
                        <i class="fas fa-book me-2"></i> 图书管理
                    </a>
                    <a href="{{ url_for('admin_users') }}" class="list-group-item list-group-item-action">
                        <i class="fas fa-users me-2"></i> 用户管理
                    </a>
                    <a href="{{ url_for('admin_categories') }}" class="list-group-item list-group-item-action">
                        <i class="fas fa-tags me-2"></i> 分类管理
                    </a>
                    <a href="{{ url_for('admin_statistics') }}" class="list-group-item list-group-item-action active">
                        <i class="fas fa-chart-bar me-2"></i> 使用统计
                    </a>
                </div>
            </div>
            
            <div class="card ink-card">
                <div class="card-header">
                    <h5 class="mb-0">数据导出</h5>
                </div>
                <div class="card-body">
                    <div class="d-grid gap-2">
                        <a href="{{ url_for('admin_export_data', type='users') }}" class="btn btn-outline-primary">
                            <i class="fas fa-file-export me-2"></i> 导出用户数据
                        </a>
                        <a href="{{ url_for('admin_export_data', type='books') }}" class="btn btn-outline-primary">
                            <i class="fas fa-file-export me-2"></i> 导出图书数据
                        </a>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="col-md-9">
            <div class="row">
                <div class="col-md-12">
                    <div class="card ink-card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">近30日活动趋势</h5>
                        </div>
                        <div class="card-body">
                            <canvas id="dailyActivityChart" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <div class="col-md-6">
                    <div class="card ink-card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">活动类型分布</h5>
                        </div>
                        <div class="card-body">
                            <canvas id="activityTypesChart" height="300"></canvas>
                        </div>
                    </div>
                </div>
                
                <div class="col-md-6">
                    <div class="card ink-card mb-4">
                        <div class="card-header">
                            <h5 class="mb-0">图书分类分布</h5>
                        </div>
                        <div class="card-body">
                            <canvas id="bookCategoriesChart" height="300"></canvas>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // 图表配置
        const chartOptions = {
            responsive: true,
            maintainAspectRatio: false,
            plugins: {
                legend: {
                    position: 'top'
                }
            }
        };
        
        // 近30日活动趋势图表
        const dailyActivityCtx = document.getElementById('dailyActivityChart').getContext('2d');
        const dailyActivityData = {
            labels: [
                {% for activity in daily_activities %}
                    "{{ activity.date }}",
                {% endfor %}
            ],
            datasets: [{
                label: '每日活动量',
                data: [
                    {% for activity in daily_activities %}
                        {{ activity.count }},
                    {% endfor %}
                ],
                backgroundColor: 'rgba(52, 152, 219, 0.2)',
                borderColor: 'rgba(52, 152, 219, 1)',
                borderWidth: 2,
                tension: 0.3,
                fill: true
            }]
        };
        
        new Chart(dailyActivityCtx, {
            type: 'line',
            data: dailyActivityData,
            options: chartOptions
        });
        
        // 活动类型分布图表
        const activityTypesCtx = document.getElementById('activityTypesChart').getContext('2d');
        const activityTypesData = {
            labels: [
                {% for activity_type in activity_types %}
                    "{{ activity_type.activity_type }}",
                {% endfor %}
            ],
            datasets: [{
                label: '活动次数',
                data: [
                    {% for activity_type in activity_types %}
                        {{ activity_type.count }},
                    {% endfor %}
                ],
                backgroundColor: [
                    'rgba(52, 152, 219, 0.7)',
                    'rgba(46, 204, 113, 0.7)',
                    'rgba(155, 89, 182, 0.7)',
                    'rgba(241, 196, 15, 0.7)',
                    'rgba(230, 126, 34, 0.7)',
                    'rgba(231, 76, 60, 0.7)',
                    'rgba(149, 165, 166, 0.7)'
                ],
                borderWidth: 1
            }]
        };
        
        new Chart(activityTypesCtx, {
            type: 'doughnut',
            data: activityTypesData,
            options: chartOptions
        });
        
        // 图书分类分布图表
        const bookCategoriesCtx = document.getElementById('bookCategoriesChart').getContext('2d');
        const bookCategoriesData = {
            labels: [
                {% for category in book_categories %}
                    "{{ category.name }}",
                {% endfor %}
            ],
            datasets: [{
                label: '图书数量',
                data: [
                    {% for category in book_categories %}
                        {{ category.count }},
                    {% endfor %}
                ],
                backgroundColor: [
                    'rgba(52, 152, 219, 0.7)',
                    'rgba(46, 204, 113, 0.7)',
                    'rgba(155, 89, 182, 0.7)',
                    'rgba(241, 196, 15, 0.7)',
                    'rgba(230, 126, 34, 0.7)',
                    'rgba(231, 76, 60, 0.7)',
                    'rgba(149, 165, 166, 0.7)'
                ],
                borderWidth: 1
            }]
        };
        
        new Chart(bookCategoriesCtx, {
            type: 'pie',
            data: bookCategoriesData,
            options: chartOptions
        });
    });
</script>
{% endblock %} 